const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require('path')
// 导出
module.exports={
    // 出现警告WARNING in configurationThe 'mode' option has not been set时候写这个
    mode:'none',
    // 指定入口文件(最终输出为main.js)
    entry:'./src/app.js',

    // 指定输出目录    
    output:{
        // 自动清除目录
        path:path.join(__dirname,'./dist'),
        // 输出的文件避免出现缓存问题
        filename:'build[hash:5].js'
    },

    // 开发服务器 要先安装webpack-dev-server
    devServer:{
        // 更改端口
        port:9090,
        // 代理
        proxy:{
            '/localhost':{
                target:'http://localhost:3000',
                changOrigin:true,
                pathRewrite:{
                    '^/api/proxy':''
                }
             }
        },
        // 每次使用npx webpack server  自动打开页面
        open:true
    },
    // 处理loader之外的一些自动化操作
    plugins:[
        // 自动生成一个html文件
        new HtmlWebpackPlugin({
            // 指定模版生成html文件
            template:'./src/index.html'
        }),
        // 自动清除
        new CleanWebpackPlugin()
        
    ],
    // 加载配置
    module:{
        rules:[
            // sass-loader
            {
               test:/\.s[ac]ss$/,
               use:['style-loader','css-loader','sass-loader']
            },
            // 图片加载器
            {
                test:/\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
                use:{
                    loader:'url-loader',
                    // 小于8k
                    options:{
                        limit:8000
                    }
                }
            }
        ]
    }
    
}

